<template>
  <div class="mod-hotSearch-add-or-update">
    <el-dialog
      v-model="visible"
      :title="!dataForm.hotSearchId ? $t('crud.addTitle') : $t('temp.modify')"
      :close-on-click-modal="false"
      @closed="onDialogClosed"
    >
      <el-form
        ref="dataFormRef"
        :model="dataForm"
        :rules="dataRule"
        label-width="80px"
        @submit.prevent
        @keyup.enter="onSubmit()"
      >
        <el-form-item
          :label="$t('shop.title')"
          prop="title"
        >
          <el-input
            v-model="dataForm.title"
            controls-position="right"
            maxlength="50"
            show-word-limit
            :label="$t('shop.title')"
          />
        </el-form-item>

        <el-form-item
          :label="$t('shop.content')"
          prop="content"
        >
          <el-input
            v-model="dataForm.content"
            controls-position="right"
            maxlength="250"
            show-word-limit
            :label="$t('shop.content')"
            @change="onCheckContent"
          />
        </el-form-item>
        <el-form-item
          :label="$t('hotSearch.seq')"
          prop="seq"
        >
          <el-input-number
            v-model="dataForm.seq"
            controls-position="right"
            :min="0"
            :max="9999999"
            :label="$t('hotSearch.seq')"
          />
        </el-form-item>
        <el-form-item
          :label="$t('product.status')"
          prop="status"
        >
          <el-radio-group v-model="dataForm.status">
            <el-radio :label="1">
              {{ $t('publics.normal') }}
            </el-radio>
            <el-radio :label="0">
              {{ $t('publics.offline') }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <div
            class="default-btn"
            @click="visible = false"
          >
            {{ $t('crud.filter.cancelBtn') }}
          </div>
          <div
            class="primary-btn default-btn"
            @click="onSubmit()"
          >
            {{ $t('crud.filter.submitBtn') }}
          </div>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { ElMessage } from 'element-plus'
const emit = defineEmits(['refreshDataList'])
// 自定义校验
// eslint-disable-next-line no-unused-vars
const validateTitle = (rule, value, callback) => {
  if (!value || !value.trim()) {
    callback(new Error($t('publics.noNull')))
  } else {
    callback()
  }
}

const dataRule = {
  title: [
    { required: true, message: $t('publics.noNull'), trigger: 'blur' },
    { validator: validateTitle, trigger: 'blur' }
  ],
  content: [
    { required: true, message: $t('publics.noNull'), trigger: 'blur' },
    { validator: validateTitle, trigger: 'blur' }
  ]
}
const dataFormRef = ref(null)
const dataForm = ref({
  hotSearchId: 0,
  title: '',
  content: '',
  recDate: '',
  seq: 0,
  status: 1
})
const visible = ref(false)
const isSubmit = ref(false)
const init = data => {
  visible.value = true
  isSubmit.value = false
  if (data) {
    dataForm.value = Object.assign({}, data)
  } else {
    nextTick(() => {
      dataFormRef.value.resetFields()
      dataForm.value = {
        hotSearchId: 0,
        title: '',
        content: '',
        recDate: '',
        seq: 0,
        status: 1
      }
    })
  }
}
// 表单提交

const page = {
  total: 0, // 总页数
  currentPage: 1, // 当前页数
  pageSize: 10 // 每页显示多少条
}
const onSubmit = () => {
  dataFormRef.value.validate(valid => {
    if (valid) {
      const param = dataForm.value
      if (isSubmit.value) {
        return false
      }
      isSubmit.value = true
      http({
        url: http.adornUrl('/admin/hotSearch'),
        method: param.hotSearchId ? 'put' : 'post',
        data: http.adornData(param)
      }).then(() => {
        ElMessage({
          message: $t('remindPop.success'),
          type: 'success',
          duration: 1500,
          onClose: () => {
            visible.value = false
            emit('refreshDataList', page)
          }
        })
      }).finally(() => {
        isSubmit.value = false
      })
    }
  })
}
const onCheckContent = () => {
  dataForm.value.content = dataForm.value.content.trim()
}
// 清除表单验证
const onDialogClosed = () => {
  dataFormRef.value?.clearValidate()
}
defineExpose({ init })
</script>
<style lang="scss" scoped>
:deep(.el-form-item) {
  margin-bottom: 28px;
}
</style>
